﻿@model List<FTBS.Models.Entities.Concert.FilmConcertEntity>
<style>
    .filmkind {
        padding: 5px;
        font-size: 27px;
        background-color: rgb(83, 141, 160);
        color: white;
    }
</style>
@if (Model.Count > 0)
{
    <div class="panel" style="display: block; display: inline-block; background-color: white; margin-top: 20px; margin-left: 15px; width: 97.5%">
        <div class="container">
            <div class="filmkind">
                <span>Phim sắp chiếu</span>
                <span style="float: right; height: 45px"><a href="/Film/ListComingFilms">
                    <img class="arrow1" src="~/Image/Icon/dou-ar.png" style="height: 45px; padding-bottom: 10px" /></a></span>
            </div>
            <hr style="margin-top: 3px; background-color: #ddd; height: 2px;" />
            <div>
                @if (Model.Count > 0 && Model.Count <= 3)
                {
                    <div style="margin: 0 auto">
                        @for (int i = 0; i < Model.Count; i++)
                        {
                            <!-- Phim đầu tiên -->
                            <div style="display: inline-block; width: 30%">
                                <div class="image-container shadow" style="margin-left: 1%; border: solid; border-width: 1px;">
                                    <a href="/Home/Detail/@Model[i].FilmId">
                                        <img src="~/Image/FilmImage/@Model[i].ImageURL" style="width:100%;height:400px" onclick="countCategoryView(@Model[0].CategoryId)" />
                                        @if (@Model[i].IMDb > 7)
                                        {
                                            <div style="position: absolute; top: 1px; right: 1px;">
                                                <img src="~/Image/Icon/tag-blockbuster.png" />
                                            </div>
                                        }
                                    </a>
                                    <div class="overlay-fluid" style="width: 100%; padding-left: 12%; padding-top: 2%">
                                        <button class="small success" style="width: 40%; font-size: 16px; padding: 3px" onclick ="Trailer('@Model[i].TrailerURL','@Model[i].Name')">Trailer</button>
                                        <button class="small warning" style="width: 40%; font-size: 16px; padding: 3px; margin-left: 20px">Chi tiết</button>
                                    </div>
                                </div>
                                <div>
                                    <strong class="limitName" style="font-size: 20px; text-transform: uppercase; color: rgba(255, 0, 0, 0.89); text-align: left; line-height: 35px;">@Model[i].Name</strong>
                                    <h3 style="color: black; margin-left: 12px; font-size: 17px">@Model[i].TheaterName</h3>
                                    <h3 style="color: black; margin-left: 12px; font-size: 17px">@Model[i].DateToShow</h3>
                                </div>
                            </div>
                        }
                    </div>
                }
                else
                {
                    <!-- Phim đầu tiên -->
                    <div style="display: inline-block; width: 25%">
                        <div class="image-container shadow" style="margin-left: 1%; border: solid; border-width: 1px;">
                            <a href="/Home/Detail/@Model[0].FilmId">
                                <img src="~/Image/FilmImage/@Model[0].ImageURL" style="width:100%;height:400px" onclick="countCategoryView(@Model[0].CategoryId)" />
                                @if (@Model[0].IMDb > 7)
                                {
                                    <div style="position: absolute; top: 1px; right: 1px;">
                                        <img src="~/Image/Icon/tag-blockbuster.png" />
                                    </div>
                                }
                            </a>
                            <div class="overlay-fluid" style="width: 100%; padding-left: 12%; padding-top: 2%">
                                <button class="small success" style="width: 40%; font-size: 16px; padding: 3px" onclick ="Trailer('@Model[0].TrailerURL','@Model[0].Name')">Trailer</button>
                                <button class="small warning" style="width: 40%; font-size: 16px; padding: 3px; margin-left: 20px">Chi tiết</button>
                            </div>
                        </div>
                        <div>
                            <strong class="limitName" style="font-size: 20px; text-transform: uppercase; color: rgba(255, 0, 0, 0.89); text-align: left; line-height: 35px;">@Model[0].Name</strong>
                            <strong style="font-size: 15px">@Model[0].TheaterName</strong>
                            <strong class="limitName" style="font-size: 18px">@Model[0].DateToShow</strong>
                        </div>
                    </div>
                    <div style="display: inline-block; width: 74%; vertical-align: top">

                        @if (Model.Count >= 4)
                        {
                            <!-- 3 phim hàng đầu tiên -->
                            <div>
                                @for (int i = 1; i < Model.Count; i++)
                                {
                                    <div style="display: inline-block; width: 30%; margin-left: 2%; margin-top: 20px">
                                        <div class="image-container shadow" style="margin-left: 1%; border: solid; border-width: 1px;">
                                            <a href="/Home/Detail/@Model[i].FilmId">
                                                <img src="~/Image/FilmImage/@Model[i].ImageURL" style="width:100%;height:200px" onclick="countCategoryView(@Model[i].CategoryId)" />
                                                @if (@Model[i].IMDb > 7)
                                                {
                                                    <div style="position: absolute; top: 1px; right: 1px;">
                                                        <img src="~/Image/Icon/tag-blockbuster.png" />
                                                    </div>
                                                }
                                            </a>
                                            <div class="overlay-fluid" style="width: 100%; padding-left: 12%; padding-top: 2%">
                                                <button class="small success" style="width: 40%; font-size: 16px; padding: 3px" onclick ="Trailer('@Model[i].TrailerURL','@Model[i].Name')">Trailer</button>
                                                <button class="small warning" style="width: 40%; font-size: 16px; padding: 3px; margin-left: 20px" onclick="ChangeView()">Chi tiết</button>
                                            </div>
                                        </div>
                                        <div style="display: block; width: 100%">
                                            <strong class="limitName" style="font-size: 15px; text-transform: uppercase; color: rgba(255, 0, 0, 0.89); text-align: left; line-height: 35px;">@Model[i].Name</strong>
                                            <strong style="font-size: 12px">@Model[i].TheaterName</strong>
                                            <strong class="limitName" style="font-size: 16px">@Model[i].DateToShow</strong>
                                        </div>
                                    </div>                          
                                }
                            </div>
                        }
                    </div>
                }
            </div>
        </div>
    </div>
}
<script>
    function ChangeView() {
        window.location.href = "/Schedule/Schedule";
    }
    $(document).ready(function () {
        $(".arrow1").mouseenter(function () {
            $(".arrow1").attr("src", "/Image/Icon/dou-ar-red.png")

        });
        $(".arrow1").mouseleave(function () {
            $(".arrow1").attr("src", "/Image/Icon/dou-ar.png")
        });
    });
</script>
